<template>
  <div>
    <CategorySelector :isDisable="showStatus !== ShowStatus.SPU_LIST">
    </CategorySelector>
    <SpuList v-if="showStatus === ShowStatus.SPU_LIST" @changStatus="ChangeShow" @getSpuInfo="saveSpuInfo"></SpuList>
    <SpuForm v-if="showStatus === ShowStatus.ADD_SPU" @changStatus="ChangeShow" :currentSpuInfo="currentSpuInfo">
    </SpuForm>
    <SkuForm v-if="showStatus === ShowStatus.ADD_SKU" @changStatus="ChangeShow" :currentSpuInfo="currentSpuInfo">
    </SkuForm>

  </div>
</template>

<script lang="ts">
export default {};
</script>

<script lang="ts" setup>
import CategorySelector from '@/components/CategorySelector/index.vue'

import SpuList from './components/SpuList.vue';
import SpuForm from './components/SpuForm.vue';
import SkuForm from './components/SkuForm.vue';
import { ShowStatus } from './components/types';
import { reactive, ref } from 'vue'
import type { SpuInfoModel, SpuImageListModel } from '@/api/product/model/spuModel';

const showStatus = ref(ShowStatus.SPU_LIST);

//保存spulist传递过来的spuInfo信息
const currentSpuInfo = ref<SpuInfoModel>({
  spuName: '', // spu名称
  category3Id: 0, // 三级id
  tmId: '', // spu品牌
  description: '', // spu描述
  spuImageList: [], // 要上传的图片列表
  spuSaleAttrList: [], // 销售属性
  spuSaleAttr: '', // 额外添加的属性 用来收集属性名
})

const ChangeShow = (value: number) => {
  showStatus.value = value
}


//spulist传递信息过来触发
const saveSpuInfo = (spuInfo: SpuInfoModel) => {
  currentSpuInfo.value = spuInfo
}


</script>

<style></style>